import React, { Component } from 'react'

class Right extends Component {

    componentDidUpdate() {
        this.myRef.children[this.props.i].scrollIntoView({behavior: 'smooth'})
    }

    render() { 
        let { list } = this.props
        return (
            <ol style={{flexGrow: 1, overflowY: 'auto'}} ref={(ref) => {
                this.myRef = ref
            }}>
                {
                    list && list.length ? list.map((item,index) => {
                        return <li key={index}>
                            <h3>{item.title}</h3>
                            <>
                                {
                                    item && item.children.length ? item.children.map((item,index) => {
                                        return <div key={index}>
                                            <img src={item.img} alt='' />
                                            <span>{item.title}</span>
                                        </div>
                                    }) : <div>暂无数据</div>
                                }
                            </>
                        </li>
                    }) : <div>暂无数据</div>
                }
            </ol>
        )
    }
}
 
export default Right;